﻿<!DOCTYPE html>
<html>
    <head>
    <title>freeCamera</title>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="favicon.ico"/>
    <link rel="bookmark" href="favicon.ico"/>
    <link rel="stylesheet" href="core.css" />
 
    <style>
        #stats { position: absolute; top:0; left: 0 }
        #stats #fps { background: transparent !important }
        #stats #fps #fpsText { color: #ccc !important }
        #stats #fps #fpsGraph { display: none }
    </style>
    
    <script src="//cdn.jsdelivr.net/npm/eruda"></script>
    
    <script type="text/javascript" src="./libs/stats.min.js"></script>
    <script type="text/javascript" src="./libs/jpg.js"></script>
    <script type="text/javascript" src="./base.js"></script>
    <script type="text/javascript" src="./math.js"></script>
    <script type="text/javascript" src="./input.js"></script>
    <script type="text/javascript" src="./binaryreader.js"></script>
    <script type="text/javascript" src="./mdx/parser.js"></script>
    <script type="text/javascript" src="./mdx/tgatexture.js"></script>
    <script type="text/javascript" src="./mdx/blptexture.js"></script>
    <script type="text/javascript" src="./mdx/animation.js"></script>
    <script type="text/javascript" src="./mdx/particleemitter.js"></script>
    
    <script>
        var gliEmbedDebug = true;
    </script>
    <!--
        <script src="./core/embed.js"></script>
    -->
  
    <script>
       
        //window.addEventListener('gliready', function() {
        //        initialize();
        //});
    
        function initialize() {
        
            try{
                var canvas = document.getElementById("canvas");
                
                window["webgl"] = CreateWebGL(canvas);
                var gl = window["webgl"];
                
                gl.clearColor(0.0, 0.141, 0.141, 1.0);
                gl.clearDepth(1.0);
                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

                var vertices = [
                    -0.5,0.5,0.0,
                    -0.5,-0.5,0.0,
                    0.5,-0.5,0.0,
                    0.5,0.5,0.0,
                    -0.5,0.5,0.0,
                    -0.5,-0.5,0.0
                ];

                indices = [0,1,2,3];

                // Create an empty buffer object to store vertex buffer
                var vertex_buffer = gl.createBuffer();

                // Bind appropriate array buffer to it
                gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

                // Pass the vertex data to the buffer
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

                // Unbind the buffer
                gl.bindBuffer(gl.ARRAY_BUFFER, null);

                // Create an empty buffer object to store Index buffer
                var Index_Buffer = gl.createBuffer();

                // Bind appropriate array buffer to it
                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer);

                // Pass the vertex data to the buffer
                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

                // Unbind the buffer
                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);


                // Vertex shader source code
                var vertCode =
                'attribute vec3 coordinates;' +
                    
                'void main(void) {' +
                    ' gl_Position = vec4(coordinates, 1.0);' +
                '}';

                // Create a vertex shader object
                var vertShader = gl.createShader(gl.VERTEX_SHADER);

                // Attach vertex shader source code
                gl.shaderSource(vertShader, vertCode);

                // Compile the vertex shader
                gl.compileShader(vertShader);

                //fragment shader source code
                var fragCode =
                'void main(void) {' +
                    ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);' +
                '}';

                // Create fragment shader object
                var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

                // Attach fragment shader source code
                gl.shaderSource(fragShader, fragCode); 

                // Compile the fragmentt shader
                gl.compileShader(fragShader);

                // Create a shader program object to store
                // the combined shader program
                var shaderProgram = gl.createProgram();

                // Attach a vertex shader
                gl.attachShader(shaderProgram, vertShader);

                // Attach a fragment shader
                gl.attachShader(shaderProgram, fragShader);

                // Link both the programs
                gl.linkProgram(shaderProgram);

                // Use the combined shader program object
                gl.useProgram(shaderProgram);

                // Bind vertex buffer object
                gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

                // Bind index buffer object
                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, Index_Buffer);

                // Get the attribute location
                var coord = gl.getAttribLocation(shaderProgram, "coordinates");

                // Point an attribute to the currently bound VBO
                gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0); 

                // Enable the attribute
                gl.enableVertexAttribArray(coord);

                // Clear the canvas
                gl.clearColor(0.5, 0.5, 0.5, 0.9);

                // Enable the depth test
                gl.enable(gl.DEPTH_TEST);

                // Clear the color buffer bit
                gl.clear(gl.COLOR_BUFFER_BIT);

                // Set the view port
                gl.viewport(0,0,canvas.width,canvas.height);

                // Draw the triangle
                //gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 2);
                
               
                var counts = new Int32Array([3,3]);
                var offsets = new Int32Array([0,2]);

                var ext = webgl.getExtension('WEBGL_multi_draw');
                void ext.
                    multiDrawElementsWEBGL(
                    gl.TRIANGLES,
                    counts, 0,
                    gl.UNSIGNED_SHORT,
                    offsets, 0,
                    counts.length);
                
            }catch(error){
                alert(error)
            }finally{
            }
        
        }
    </script>
  
    </head>
  
    <body onload="initialize()">
        <h3>显示UTF8<h3>
        <canvas id="canvas"></canvas>
    </body>
</html>